<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  html,
  body {
    margin: 0px;
  }

  body {
    background-color: #faf9f9;
  }

  .title {
    color: #C4C4C4;
    background-color: #3C3C3C;
    text-align: center;
    padding: 5px 0px;
    background-image: linear-gradient(45deg, black, #867a7a);
  }

  a {
    text-decoration: none;
  }

  span {
    font-size: 32px;
  }

  ul {
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-wrap:wrap;
  }

  li {
    margin: 20px 15px;
    list-style: none;
    display:inline;
  }

  div.polaroid {
    width: 150px;
    height: 150px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 20px;
  }

  div img {
    width: 100%;
    height: 80%;
    border-radius: 20px 20px 0px 0px;
  }
  
  div p{
    background-color: white;
    margin: 0px;
    text-align: center;
    padding: 10px 0px;
    font-weight: 900;
    height: 20%;
  }
</style>

<body>
  <div class="title"><span>game目录</span></div>
  <div>
    <ul>
      <li>
        <a href="./飞机大战/index.html">
          <div class="polaroid">
            <img src="http://img2.imgtn.bdimg.com/it/u=952908792,117348140&fm=26&gp=0.jpg" />
            <p>飞机大战</p>
          </div>
        </a>
      </li>
      <li>
        <a href="./你画我猜/index.html">
          <div class="polaroid">
            <img src="http://img4.imgtn.bdimg.com/it/u=626442183,3971591687&fm=26&gp=0.jpg" />
            <p>你画我猜</p>
          </div>
        </a>
      </li>
      <li>
        <a href="./流浪地球/index.html">
          <div class="polaroid">
            <img src="https://www.runoob.com/try/demo_source/rock600x400.jpg" />
            <p>流浪地球</p>
          </div>
        </a>
      </li>
      <li>
        <a href="./七色动波/index.html">
          <div class="polaroid">
            <img src="http://img1.imgtn.bdimg.com/it/u=2562165158,4175209503&fm=26&gp=0.jpg"/>
            <p>七色动波</p>
          </div>
        </a>
      </li>
      
    </ul>
  </div>
  
</body>

</html>